<template>
	<view class="motion-track-container">
		<view class="uni-common-mt">
			<map ref="map" id="map" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale">
			</map>
			<view class="cover">
				<view class="cover_title">每日记录<text>（{{month}}月）</text></view>
				<view class="cover_con">
					<xweek v-on:back="changeBack"></xweek>
					<view class="border-line"></view>
					<image src="../../static/images/1.png" class="xl"></image>
					<scroll-view class="scroll-view" scroll-y="true" >
						<view class="cover_con_li" v-for="(item,index) in movementList" :key='index' @click="getTrack(item.package_no)">
							<view class="border-h" v-if="index"></view>
							<view class="cover_con_div">
								<view class="cover_con_name">使用设备：</view>
								<view class="cover_con_p">{{item.equipment}}</view>
							</view>
							<view class="cover_con_div">
								<view class="cover_con_name">运动位置</view>
								<view class="cover_con_p">{{item.address}}</view>
							</view>
							<view class="cover_con_div">
								<view class="cover_con_name">开始时间：</view>
								<view class="cover_con_p">{{item.StartTime}}</view>
							</view>
							<view class="cover_con_div">
								<view class="cover_con_name">结束时间：</view>
								<view class="cover_con_p">{{item.EndTime}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import xweek from '@/components/junkj-xweek/xweek.vue';
	export default {
		components: {
			xweek
		},
		data() {
			return {
				latitude: 30.689514,
				longitude: 104.052012,
				markers: [],
				polyline: [],
				scale: 15,
				movementList: [],
				month: '',
				time: ''
			}
		},
		onLoad(option) {
			this.longitude = this.$utils.getData("centerX")
			this.latitude = this.$utils.getData("centerY")
		},
		onShow() {
			this.getMonth()
			this.getTeamData()
			let date = new Date()
			this.time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
		},
		methods: {
			/**
			 * 切换日期
			 */
			changeBack: function(d) {
				this.time = d
				// 获取设备列表第一个设备轨迹
				this.getTeamData()
			},
			/**
			 * 获取设备列表
			 */
			getTeamData () {
				this.$myRuquest({
					url: "/jsl/user/UserEquipmentListById",
					data: {
						requestParams: {
							procedure: {
								p_uid: this.$utils.getData("p_uid"),
								p_page_no: 1,
								p_page_size: 999
							}
						}
					}
				}).then(res => {
					this.movementList = []
					let movementList = []
					res.forEach(item => {
						movementList.push({
							equipment: item.nickname,
							address: `${item.country}${item.province}${item.city}`,
							StartTime: `${this.time} 00:00:00`,
							EndTime: `${this.time} 23:59:59`,
						})
					})
					this.getTrack(res[0].package_no, movementList)
				}).catch()
			},
			/**
			 * 获取运动轨迹
			 * @param p_package_no 包id
			 */
			getTrack(p_package_no, movementList) {
				this.$myRuquest({
					url: "/jsl/trajectory/UserTrajectoryByPackageOn",
					data: {
						requestParams: {
							procedure: {
								p_uid: 1,
								p_package_no: p_package_no,
								p_start_time: `${this.time} 00:00:00`,
								p_end_time: `${this.time} 23:59:59`
							}
						}
					}
				}).then(res => {
					if (res.length) {
						let arr = []
						res.forEach((item, index) => {
							if (index === 0 || index === res.length) {
								this.markers.push({
									id: index,
									latitude: item.latitude,
									longitude: item.longitude,
									iconPath: index ? "../../static/images/dingwei.png" : "../../static/images/start.png",
									width: 20,
									height: 32
								})
							}
							arr.push({
								latitude: item.latitude,
								longitude: item.longitude
							})
						})
						this.latitude = arr[0].latitude
						this.longitude = arr[0].longitude
						uni.createMapContext("map", this).moveToLocation({
							longitude: this.longitude,
							latitude: this.latitude
						})
						this.polyline = [{
							points: arr,
							color: "#0000AAFF",
							width: 4,
							dottedLine: false,
							arrowLine: true
						}]
						if (movementList) {
							this.movementList = movementList
						}
					} else {
						this.markers = []
						this.polyline = []
					}
				})
			},
			toJSON(){},
			getMonth() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				this.month = month
			}
		}
	}
</script>

<style lang="scss">
	map {
		width: 100%;
		height: 50vh;
	}
	
	.border-line {
		border-top: 1px solid #bfbfbf;
		height: 20rpx;
	}

	.xl {
		width: 46rpx;
		height: 16rpx;
		position: absolute;
		left: 50%;
		top: 190rpx;
		transform: translateX(-50%);
	}

	.border-h {
		width: 100%;
		height: 1px;
		background-color: #F0F0F0;
		margin-bottom: 20rpx;
	}

	.border-v {
		height: 100%;
		width: 1px;
		background-color: #F0F0F0;
	}

	.cover {
		display: flex;
		background: #999;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50vh;
		background: #FFFFFF;
		box-shadow: 0px 0px 9rpx 2rpx rgba(108, 108, 108, 0.2);
		border-radius: 4rpx;
		display: block;
	}

	.cover_title {
		padding: 20rpx 0 12rpx 34rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		width: 100%;
	}

	.cover_title text {
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}

	.cover_con {
		width: 86%;
		padding: 0 49rpx;
		.scroll-view {
			height: calc(50vh - 194rpx);
		}
	}

	.cover_con_li {
		padding-bottom: 14rpx;
	}

	.cover_con_div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		display: -webkit-flex;
		line-height: 50rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		height: 50rpx;
	}

	.cover_con_name {
		letter-spacing: 4rpx;
		width: 22%;
	}

	.cover_con_p {
		padding-left: 10rpx;
	}
</style>
